<template>
  <view class="container">
    <view class="content">
      <image v-if="props.tempFile" :src="props.tempFile" mode="aspectFill"></image>
      <image v-else :src="historyImg" mode="aspectFill"></image>
      <view class="mainbox">
        <span style="font-size: 50rpx">识别结果为:</span>
        <view v-for="item in list" :key="item.id">
          <view
            style="
              display: flex;
              justify-content: space-between;
              flex-direction: column;
              margin-top: 30rpx;
            "
            class="resultname"
          >
            <span v-if="item.category">{{ item.category }}</span>
            <span v-else>{{ item.name }}</span>
            <span style="font-size: 24rpx" v-if="item.score">置信度: {{ item.score }}</span>
            <span style="font-size: 24rpx" v-else>置信度: {{ item.confidence }}</span>
          </view>
        </view>
      </view>
    </view>
    <view class="btnDeetail" @click="navigateBack"> 确认 </view>
  </view>
  <uv-loading-page
    :loading="loading"
    loading-text="识别中,请耐心等待..."
    font-size="30rpx"
  ></uv-loading-page>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
import { imgApi, getClassHistory, getDisHistory } from '@/services/img'
const props = defineProps({
  tempFile: {
    type: String,
  },
  api: {
    type: String,
  },
  clsId: {
    type: Number,
  },
  disId: {
    type: Number,
  },
})
const list = ref()
const navigateBack = () => {
  uni.navigateBack({
    delta: 1,
  })
}
const loading = ref(true)
const historyImg = ref('')
// 图片识别接口返回的数据有用的值传递过来接收并显示
onMounted(async () => {
  const { api, tempFile, disId, clsId } = props
  console.log(disId)
  let res = null
  loading.value = true //加载动画
  if (disId) {
    //说明是查询历史记录
    res = await getDisHistory(disId)

    list.value = res.data[0].classifications.map((item, index) => {
      return {
        confidence: res.data[0].confidences[index],
        category: item,
      }
    })
    historyImg.value = res.data[0].url
    loading.value = false
    return
  } else if (clsId) {
    res = await getClassHistory(clsId)
    list.value = res.data[0].names.map((item, index) => {
      return {
        score: res.data[0].scores[index],
        name: item,
      }
    })
    historyImg.value = res.data[0].url
    loading.value = false
    return
  }
  if (api) {
    res = await imgApi(tempFile, `/dis/${api}/upload`)
  } else {
    res = await imgApi(tempFile, '/class/upload')
  }
  list.value = res.data
  loading.value = false
})
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: 100vh; */
  background: linear-gradient(197.46deg, #1a966c -15.94%, #ffffff 100.8%),
    linear-gradient(0deg, #fff, #fff);
}

button {
  margin: 20px;
}

.image {
  width: 300px;
  height: 300px;
}

.result {
  margin-top: 20px;
}

.content {
  border-radius: 20px;
  overflow: hidden;
  background-color: #fff;
  margin-bottom: 50px;
}
.content > image {
  height: 700rpx;
}

.mainbox {
  padding: 15px;
}

.btnDeetail {
  width: 80%;
  padding: 8px 0;
  text-align: center;
  background-color: #1a966c;
  border-radius: 20px;
  color: #fff;
  position: relative;
  bottom: 10rpx;
}

.resultname {
  padding: 2px 0;
  color: #1a966c;
  font-size: 38rpx;
}
</style>
